<template>
  <div class="peoDetail">
    <div class="ql-editor"
         v-html="scrStore.guanwangPage[1].tableData[0].pageJson.xinwenContent[detailInd].content"></div>
  </div>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router'
  import { screenStore } from '~/stores/modules/screen'

  const route = useRoute()
  const router = useRouter()
  const scrStore = screenStore()
  const detailInd = ref(0)
  onMounted(() => {
    detailInd.value = route.query.ind
  })
</script>

<style scoped lang="less">
  @import "quill/dist/quill.snow.css";

  .peoDetail .ql-editor ::v-deep .ql-align-center {
    text-align: center !important;
  }

  /* 确保图片在居中容器内正确显示 */
  .peoDetail .ql-editor ::v-deep .ql-align-center img {
    display: inline-block !important; /* 关键：避免图片默认块级元素导致的居中失效 */
    margin: 0 auto !important;
  }
</style>
